<template>
	<view class="container">
		<uni-file-picker ref="fileImage" :limit="9" v-model="mediaList" :auto-upload="false" fileMediatype="image"
			mode="grid" @select="select" @progress="progress" @success="success" @fail="fail" @delete="deleteImage"></uni-file-picker>
			<view class="example">
				<!-- 基础用法，不包含校验规则 -->
				<uni-forms ref="baseForm" :rules="rules" :model="baseFormData" labelWidth="80px">
<!-- 				<uni-forms-item label="活动类别">
					<uni-data-select v-model="baseFormData.type" :localdata="activityType" >
					</uni-data-select>
				</uni-forms-item> -->
					<uni-forms-item label="活动名称" required name="activityName">
						<uni-easyinput v-model="baseFormData.activityName" placeholder="请输入活动名称" />
					</uni-forms-item>
					<uni-forms-item label="活动地点" required name="activityPlace">
						<uni-easyinput v-model="baseFormData.activityPlace" placeholder="请输入活动地点" />
					</uni-forms-item>
					<uni-forms-item label="活动开始时间"  required name="beginTime">
					<uni-datetime-picker type="datetime" return-type="timestamp"
							v-model="baseFormData.beginTime" />
					</uni-forms-item>
					<uni-forms-item label="活动截止时间" required name="endTime">
					<uni-datetime-picker type="datetime" return-type="timestamp"
							v-model="baseFormData.endTime" />
					</uni-forms-item>
					<uni-forms-item label="活动级别" required name="activityLevel">
						<uni-data-checkbox v-model="baseFormData.activityLevel" :localdata="levels" />
					</uni-forms-item>
					<uni-forms-item label="报名开始时间" required name="begin">
					<uni-datetime-picker type="datetime" return-type="timestamp"
							v-model="baseFormData.begin" />
					</uni-forms-item>
					<uni-forms-item label="报名截止时间" required name="end">
					<uni-datetime-picker type="datetime" return-type="timestamp"
							v-model="baseFormData.end" />
					</uni-forms-item>
					<uni-forms-item label="人数限制" required name="limitPerson">
						<uni-easyinput v-model="baseFormData.limitPerson" placeholder="请输入人数限制" />
					</uni-forms-item>
					<uni-forms-item label="联系方式(邮箱)" required name="contact">
						<uni-easyinput v-model="baseFormData.contact" placeholder="请输入联系方式" />
					</uni-forms-item>
					<uni-forms-item label="活动介绍" required name="introduction">
						<uni-easyinput type="textarea" v-model="baseFormData.introduction" placeholder="请输入自我介绍" />
					</uni-forms-item>
					<button type="primary" @click="submit('baseForm')">提交</button>
				</uni-forms>
			</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 基础表单数据
				baseFormData: {
                    picture:'',
					activityName: '',
					activityPlace: '',
                    activityLevel: '',
					introduction: '',
	                contact: '',
					activityLevel: '',
                    begin:'',
                    end:'',
					limitPerson: '',
                    userId:'',
                    beginTime:'',
                    endTime:'',
				},
				mediaList: [],
				// 多选数据源
				levels: [{
					text: '院级',
					value: 0
				}, {
					text: '校级',
					value: 1
				}, {
					text: '其他',
					value: 2
				}
				], 
				rules: {
					activityName: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					activityPlace: {
						rules: [{
							required: true,
							errorMessage: '地点不能为空'
						}]
					},
					limitPerson: {
						rules: [{
							required: true,
							errorMessage: '请输入人数限制'
						}]
					},
					contact: {
						rules: [{
							required: true,
							errorMessage: '请输入邮箱'
						}]
					},
					beginTime: {
						rules: [{
							required: true,
							errorMessage: ' 请选择活动开始时间'
						}]
					},
					endTime: {
						rules: [{
							required: true,
							errorMessage: '请选择活动结束时间'
						}]
					},
					begin: {
						rules: [{
							required: true,
							errorMessage: '请选择报名开始时间'
						}]
					},
                    end: {
                    	rules: [{
                    		required: true,
                    		errorMessage: '请选择报名结束时间'
                    	}]
                    },
                    introduction: {
                    	rules: [{
                    		required: true,
                    		errorMessage: '请输入活动介绍'
                    	}]
                    },
                    activityLevel: {
                    	rules: [{
                    		required: true,
                    		errorMessage: '请选择活动等级'
                    	}]
                    },
				},
				
			}
		},
		onLoad() {
            uni.getStorage({
                key:'user',
                success: (res) => {
                    this.baseFormData.userId = res.data.id
                    console.log(this.baseFormData.userId)
                }
            })
		},
		methods: {
			submit(ref) {
				this.$refs[ref].validate().then(res => {
                    console.log(this.baseFormData);
					uni.showToast({
						title: `校验通过`
					});
                    uni.request({
                        url:'/gongyi/activity/addActivity',
                        method:'POST',
                        header:{
                            'Content-Type': 'application/json',
                        },
                        data:JSON.stringify(this.baseFormData),
                        success: (res) => {
                            console.log(this.baseFormData)
                        }
                    });
                    
				}).catch(err => {
					console.log('err', err);
				})
			},
            select(e){
                console.log("select");
				const tempFilePaths = e.tempFilePaths;//e是获取的图片源
				uni.uploadFile({
					url: '/gongyi/common/upload', //上传图片的后端接口
					filePath: tempFilePaths[0],
					name: 'file',
					success: res => {
						this.baseFormData.picture = JSON.parse(res.data).name;
						console.log(this.baseFormData.picture);
					}
                })
            },
            deleteImage(){
              uni.request({
                  url:'/gongyi/common/delete?name='+this.baseFormData.picture,
                  method:'DELETE',
                  success: () => {
                       uni.showToast({
                           title:'图片移除成功！',
                           icon:'success'
                       })
                  }
              })  
            },
            progress(){
                console.log("progress");
            },
            success(){
                console.log("success");
            }
		}
	}
</script>

<style lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		line-height: 35px;
		margin-left: 10px;
	}
</style>

